<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>自定义指令的钩子函数及其参数</title>
	<!--引入Vue库-->
	<script src="vue.js"></script>
</head>
<body>	
<div id="app">	
    <div v-test="color">
        {{ num }}
    </div>
</div>
<button onclick="unbindApp()">解绑</button>
<script type="text/javascript">
  // 解绑
  function unbindApp() {
      vm.$destroy();
      }
  // 自定义指令
  Vue.directive("test",{
      //1-被绑定
      bind:function (el, binding, vnode) {
          console.log("1-bind 被绑定");
          console.log("el:",el);
          console.log("binding:",binding);
          console.log("vnode:",vnode);
          el.style.color = binding.value;
          },
      //2-被插入
      inserted:function (el, binding, vnode) {
          console.log("2-inserted 被插入");
          },
      //3-更新
      update:function (el, binding, vnode) {
          console.log("3-update 更新");
          },
      //4-更新完成
      componentUpdated:function (el, binding, vnode) {
          console.log("4-componentUpdated 更新完成");
          },
      //5-解绑
      unbind:function (el, binding, vnode) {
          console.log("5-unbind 解绑");
          }
      });
  var vm=new Vue({
      el: '#app',
      data:{
          num: 123,
          color:'red'
          }
      })
</script>
</body>
</html>
